﻿<html>

<head>
	<title>统计表</title>
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://code.highcharts.com/highcharts.js"></script>
	<script src="http://code.highcharts.com/modules/data.js"></script>
	<style>
		/* 控制标题样式*/
		/* .highcharts-title {} */
		.box {
			margin: 20px 0px;
		}

		.select {
			font-size: 16px;
		}
	</style>
	<script language="JavaScript">

	</script>
</head>

<body>
	<div id="app">
		<div class="text-c">
			<span class="select-box inline box">
				<select class="select" v-model="section">
					<option value="0">部门</option>
					<option value="1">用户</option>
					<option value="2">报刊</option>
				</select>
			</span>
			<button @click="statis" class="btn btn-success">统计</button>
		</div>

		<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
		<table id="datatable" style="display: none;">
			<thead>
				<tr>
					<th></th>
					<th v-for="(item, index) in resultlist" :key="index">{{ item['head'] }}</th>
				</tr>
			</thead>
			<tbody>
				<tr v-if="section!=2">
					<th>统计详情</th>
					<td v-for=" (item, index) in headlist" :key="index">{{resultlist[index]['销售量']}}</td>
				</tr>
				<tr v-else>
					<th>统计详情</th>
					<td v-for="(item, index) in resultlist" :key="index">{{resultlist[index]['销售量']}}</td>
				</tr>
			</tbody>
		</table>
	</div>
</body>
<script src="lib/vue.js"></script>
<script>
	function chartinit() {
		Highcharts.chart('container', {
			credits: {
				enabled: true
			},
			data: {
				table: 'datatable'
			},
			chart: {
				type: 'column'
			},
			title: {
				text: '报刊统计情况表'
			},
			yAxis: {
				allowDecimals: false,
				title: {
					text: '销售量'
				},
				tickAmount: 8,
				ceiling: 1000,
				floor: 0,
				minTickInterval: 2,
			},
			tooltip: {
				formatter: function () {
					return '<b>' + '书籍：' + vm.newsnamelist[this.series.index] +
						'</b><br/> 共' +
						this.point.y + '份'
				}
			},
			credits: {
				enabled: false
			}
		})
	}
	$(function () {
		chartinit();
	})


	var vm = new Vue({
		el: '#app',
		created() {
		},
		mounted() {
			var _this = this
			$.ajax({
				type: 'get',
				url: `http://localhost:8080/statis?type=${_this.section}`,
				async: false,
				success(data) {
					console.log(data);
					_this.resultlist = data
					data.forEach(el => {
						_this.newsnamelist.push(el['报刊名']);
						_this.headlist.push(el['head'])
					})
					console.log(_this.newsnamelist);
				},
				error(err) {
					console.log(err.message);
				}
			})
		},
		data: {
			section: 0,
			resultlist: [],
			newsnamelist: [],
			headlist: []
		},
		methods: {
			statis() {
				this.resultlist.length = this.newsnamelist.length = this.headlist.length = 0
				let _this = this;
				$.ajax({
					type: 'get',
					url: `http://localhost:8080/statis?type=${_this.section}`,
					async: false,
					success(data) {
						console.log(data);
						vm.resultlist = data
						data.forEach(el => {
							_this.newsnamelist.push(el['报刊名']);
							_this.headlist.push(el['head'])
						})
					},
					error(err) {
						console.log(err.message);
					}
				})
				setTimeout(chartinit, 0)
			}
		},
	})
</script>

</html>